<template>
  <div class="module">
    <div class="title">交易大类排名</div>
    <div class="content">
      <div class="top">
        <div>
          <span>交易大类&nbsp;</span>
          <el-select
            v-model="selectedValue"
            clearable
            placeholder="请选择"
            @change="selectedChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <el-radio-group
          v-model="rankingRadio1"
          size="mini"
          border="true"
          style="margin-left: auto"
          @change="rankingRadio1Change"
        >
          <el-radio-button label="今年以来"></el-radio-button>
          <el-radio-button label="近一年"></el-radio-button>
          <el-radio-button label="近三年"></el-radio-button>
          <el-radio-button label="全部"></el-radio-button>
        </el-radio-group>
        <div style="margin-left: 10px">
          <el-date-picker
            v-model="datePicker"
            type="monthrange"
            range-separator="-"
            start-placeholder="开始"
            end-placeholder="结束"
            @change="datePickerChange"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="group_table">
        <div class="table">
          <el-table :data="strokeCountTableData" style="width: 100%">
            <el-table-column
              label="排名"
              width="80px"
              align="center"
              type="index"
            >
            </el-table-column>
            <el-table-column
              prop="counterpartyName"
              label="客户名称"
              align="center"
              width="280px"
            >
            </el-table-column>
            <el-table-column
              prop="tradeCount"
              label="笔数(笔)"
              align="center"
              width="140px"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="table">
          <el-table :data="amountTableData" style="width: 100%">
            <el-table-column
              label="排名"
              width="80px"
              align="center"
              type="index"
            >
            </el-table-column>
            <el-table-column
              prop="counterpartyName"
              label="客户名称"
              align="center"
              width="280px"
            >
            </el-table-column>
            <el-table-column
              prop="tradeAmount"
              label="金额(亿)"
              align="center"
              width="140px"
              :formatter='amountFormatter'
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getTradeInfoStatisticsRankingByAmount,
  getTradeInfoStatisticsRankingByCount,
  getTradeTypes,
} from '@/api/customerManagement/tradeInformation';
import moment from 'moment';
export default {
  data() {
    return {
      strokeCountTableData: [],
      amountTableData: [],
      selectedValue: '',
      rankingRadio1: '今年以来',
      startDate: '',
      endDate: moment().format('YYYYMMDD'),
      datePicker: '',
      options: [],
      customerId: '',
    };
  },
  mounted() {
    this.customerId = this.$route.query.customerId;
    this.rankingRadio1Change();
    this.getTradeTypesData();
  },
  methods: {
    selectedChange(val) {
      this.selectedValue = val;
      this.getTradeInfoStatisticsRankingByCountData();
      this.getTradeInfoStatisticsRankingByAmountData();
    },
    amountFormatter(row, column, cellValue, index) {
      if (!isNaN(Number(cellValue))) {
        return Math.round(cellValue/100000000);
      } else {
        return '-';
      }
    },
    rankingRadio1Change(value = '今年以来') {
      const today = moment();
      switch (value) {
        case '今年以来':
          // 获取一年前的日期
          const YearAgo = today.startOf('years').format('YYYYMMDD');
          this.startDate = YearAgo;
          this.endDate = today.format('YYYYMMDD');
          break;
        case '近一年':
          // 获取一年前的日期
          const oneYearAgo = today.subtract(1, 'years').format('YYYYMMDD');
          this.startDate = oneYearAgo;
          this.endDate = today.format('YYYYMMDD');
          break;
        case '近三年':
          // 获取一年前的日期
          const threeYearAgo = today.subtract(3, 'years').format('YYYYMMDD');
          this.startDate = threeYearAgo;
          this.endDate = today.format('YYYYMMDD');
          break;
        case '全部':
          this.startDate = '';
          this.endDate = '';
          break;
        default:
          break;
      }
      this.getTradeInfoStatisticsRankingByCountData();
      this.getTradeInfoStatisticsRankingByAmountData();
    },
    async getTradeInfoStatisticsRankingByCountData() {
      const params = {
        counterpartyId: this.customerId,
        tradeDirection: '',
        startDate: this.startDate,
        endDate: this.endDate,
        tradeType: this.selectedValue,
      };
      const { data } = await getTradeInfoStatisticsRankingByCount(params);
      this.strokeCountTableData = data.records;
    },
    async getTradeInfoStatisticsRankingByAmountData() {
      const params = {
        counterpartyId: this.customerId,
        tradeDirection: '',
        startDate: this.startDate,
        endDate: this.endDate,
        tradeType: this.selectedValue,
      };
      const { data } = await getTradeInfoStatisticsRankingByAmount(params);
      this.amountTableData = data.records;
    },
    async getTradeTypesData() {
      const { data } = await getTradeTypes();
      this.options = data.records.map((item) => {
        return {
          label: item,
          value: item,
        };
      });
    },
    datePickerChange(date) {
      if (!date) return;
      this.startDate = moment(date[0]).format('YYYYMMDD');
      this.endDate = moment(date[1]).format('YYYYMMDD');
      this.getTradeInfoStatisticsRankingByCountData();
      this.getTradeInfoStatisticsRankingByAmountData();
    },
  },
};
</script>

<style lang="scss" scoped>
.module {
  padding: 14px;
}
.content {
  border: 1px solid #39517f;
  padding: 14px;
  .top {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
}
.group_table {
  display: flex;
  justify-content: space-around;
}
.title {
  line-height: 18px;
  border-left: 5px solid #08b0f0;
  padding-left: 16px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.table {
  margin-top: 10px;
  border: 1px solid #39517f;
}
.table_echarts {
  .pie_echarts {
    width: 100%;
  }
}
</style>
